<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script th:src="@{js/jquery-3.3.1.min.js}"></script>
</head>
<body>
<h2>用户注册</h2>
 <form action="/register" method="post" id="registerForm">
     用户名：<input type="text" name="username" id="username"><br>
     密码：<input type="password" name="password" id="password"><br>
     确认密码：<input type="password" name="cPassword" id="cPassword"><br>
     昵称：<input type="text" name="nikeName" id="nikeName"><br>
     <div id="tips" style="color: red"></div>
     <button type="button" id="doRegister">注册</button>
 </form>
</body>
</html>

<script>

    $(document).ready(function () {
        //前端验证信息不能为空，以及密码与输入密码要一致
        $("#doRegister").click(function () {
            var username = $("#username").val();
            var password = $("#password").val();
            var cPassword = $("#cPassword").val();
            var nikeName = $("#nikeName").val();

            if(username===""){
                $("#tips").text("用户名不能为空");
            }else if(password===""){
                $("#tips").text("密码不能为空");
            }else if(cPassword===""){
                $("#tips").text("确认密码不能为空");
            }else if(nikeName===""){
                $("#tips").text("昵称不能为空");
            }else {
                if(password===cPassword){
                    var targetUrl = $("#registerForm").attr("action"); //submit路径
                    var data = $("#registerForm").serialize();  //表单数据，序列化
                    $.ajax({
                        type:'POST',
                        url:targetUrl,
                        cache: false,
                        data:data,  //重点必须为一个变量如：data
                        //dataType:'json',
                        success:function(data){
                            alert(data);
                        },
                        error:function(error){
                            alert(error);
                        }
                    })
                }else {
                    $("#tips").text("两次密码输入不一致，请重新输入");
                }
            }
        })

    });
</script>